<template>
  <div class="container">
    <h2>Vue-Router</h2>
    <ul class="nav nav-tabs">
      <li>
        <router-link to="/about" active-class="active">About</router-link>
      </li>
      <li>
        <router-link to="/home" active-class="active">Home</router-link>
      </li>
    </ul>
    <div>
      <keep-alive exclude="About">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
li a.active {
  color: #555;
  background-color: yellowgreen !important;
  border: 1px solid #ddd;
  border-bottom-color: #0000;
}
</style>
